
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/css.css" rel="stylesheet" type="text/css">
<script src="style/jquery.min.js"></script>
<title>摇号</title>
</head>
<div class="box">
	<div class="submit" data-id="0">开 始</div>
	<div class="submitexport" id="exportButton">导 出</div>
	<p class="Title">中选名单显示</p>
	<ul class="prizeList"></ul>
</div>
</body>
<script type="text/javascript">
var datajson = "data.json"; // 数据路径
var choosenum =50;  //摇号中选数量
var changspeed = 50; //摇号滚动速度 0 - 1000 数越小越快

//从一个给定的数组arr中,随机返回num个不重复项
function getArrayItems(arr, num) {
    //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
    var temp_array = new Array();
    for (var index in arr) {
        temp_array.push(arr[index]);
    }
    //取出的数值项,保存在此数组
    var return_array = new Array();
    for (var i = 0; i<num; i++) {
        //判断如果数组还有可以取出的元素,以防下标越界
        if (temp_array.length>0) {
            //在数组中产生一个随机索引
            var arrIndex = Math.floor(Math.random()*temp_array.length);
            //将此随机索引的对应的数组元素值复制出来
            return_array[i] = temp_array[arrIndex];
            //然后删掉此索引的数组元素,这时候temp_array变为新的数组
            temp_array.splice(arrIndex, 1);
        } else {
            //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
            break;
        }
    }
    return return_array;
}
var interval;
$(".submit").click(function(){
	var status = $(this).data("id");
	var ints ;
	if(status == 0){
		$.get(datajson,{},function(data){
			if(data){
      			if(data.code=="1"){
        			function times(){
						var ArrList=data.data;
						var res = getArrayItems(ArrList,choosenum);
						str='';
						for(o in res){
							num = parseInt(o)+1;
                            var telstr = res[o].tel.substr(0,3)+'****'+res[o].tel.substr(-4,4);
							str+='<li data-id="'+res[o].id+'" data-tel="'+res[o].tel+'">'+num+'、<span>'+res[o].name+'</span><label>'+telstr+'</label></li>';
						}
						$(".prizeList").html(str);
					}
					interval = setInterval(times,100);
					$(".submit").data("id","1");
					$(".submit").text("停止");
            		$(".submitexport").hide();
            		$(".Title").hide();
	            }
	        }else{  
	            alert('Ajax error!');
	        }
	    },'json');
	}else{
		clearInterval(interval);
		$(".submit").data("id","0");
		$(".submit").text("开始");
		$(".submitexport").show();
		$(".Title").show();
	}
})

$(document).ready(function() {
    $("#exportButton").click(function(e) {
        e.preventDefault();
        // 找到要导出数据的表格
        var table = '<style>table {border-collapse: collapse;width:100%;background-color:#fff;color:#333;font-size: 14px;border: 1px solid #ccc;}th, td {padding: 8px;border: 1px solid #ccc;}th {background-color: #f1f1f1;font-weight: bold;}</style><table><tr><td>ID</td><td>姓名</td><td>手机号</td></tr>';
        $('.prizeList li').each(function(){
            var id = $(this).data('id');
            var name = $(this).find('span').text();
            var tel = $(this).data('tel');if(tel.length>11)tel="'"+tel;
            table+='<tr><td>'+id+'</td><td>'+name+'</td><td>'+tel+'</td>';
        })
        table+='</table>';
        // 将表格数据作为字符串转换为 Excel 文件格式
        var uri = "data:application/vnd.ms-excel;base64,";
        var template = '{table}';
        var base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)));
        };
        var format = function(s, c) {
        return s.replace(/{(\w+)}/g, function(m, p) {
        return c[p];
        });
        };
        var ctx = {
        worksheet: "Sheet1",
        table: table,
        };
        var href = uri + base64(format(template, ctx));
        // 将下载链接设置为Excel文件并触发下载
        // 使用原生 JavaScript 下载链接
        var link = document.createElement("a");
        link.download = "data.xls";
        link.href = href;
        link.click();
    });
});
</script>
</html>